<template>
  <div class="height_width-full">
    <div class="breadcrumb">
      <div class="breadcrumb-icon-box">
        <i class="el-icon-location-outline"></i>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <div class="home-main">
      <div class="home-box " :style="{backgroundImage: 'url(' + src + ')'}">
        <el-card class="box-card home-card">
          <div class="text-center">
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="80" :src="userImg"></el-avatar>
              </div>
            </div>
            <div>
              <h2 class="welcome-title">欢迎您</h2>
            </div>
            <div>
              <span class="name-color">
                {{ userInfo }}
              </span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      src: require('@/assets/images/bg.png'),
    }
  },
  computed: {
    userImg() {
      return this.$api.SERVER_URL + this.$store.getters.getUser.img;
    },
    userInfo(){
      return this.$store.getters.getUser.nickname + `(${this.$store.getters.getUser.post})`;
    }
  }
}
</script>

<style scoped>

.home-main {
  height: 500px;
}

.home-box {
  height: 90%;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-card {
  width: 25%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.name-color {
  color: #1384a5;
}

.welcome-title {
  font-weight: normal;
}
</style>
